<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Foundry Multi-purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/flexslider.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/ytplayer.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
    </head>
    <body class="scroll-assist">
        <div class="nav-container">
            <a id="top"></a>
            <nav>
                <div class="nav-utility">
                    <div class="module left">
                        <i class="ti-location-arrow">&nbsp;</i>
                        <span class="sub">68 Cardamon Place, Melbourne Vic 3000</span>
                    </div>
                    <div class="module left">
                        <i class="ti-email">&nbsp;</i>
                        <span class="sub">hello@foundry.net</span>
                    </div>
                    <div class="module right">
                        <a class="btn btn-sm hidden-xs hidden-sm hidden-md" href="variant/builder.html">Try Builder</a>
                        <a class="btn btn-sm btn-filled" href="#">Buy Now</a>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="module left">
                        <a href="index.html">
                            <img class="logo logo-light" alt="Foundry" src="img/logo-light.png" />
                            <img class="logo logo-dark" alt="Foundry" src="img/logo-dark.png" />
                        </a>
                    </div>
                    <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                        <i class="ti-menu"></i>
                    </div>
                    <div class="module-group right">
                        <div class="module left">
                            <ul class="menu">
                                <li class="has-dropdown">
                                    <a href="#">
                                        Home
                                    </a>
                                    <ul class="mega-menu">
                                        <li>
                                            <ul>
                                                <li>
                                                    <span class="title">Concepts</span>
                                                </li>
                                                <li>
                                                    <a href="home-adventure.html">Adventure Travel</a>
                                                </li>
                                                <li>
                                                    <a href="home-agency.html">Agency</a>
                                                </li>
                                                <li>
                                                    <a href="home-agency-2.html">Agency 2</a>
                                                    <span class="label">New!</span>
                                                </li>
                                                <li>
                                                    <a href="home-app-landing.html">App Landing</a>
                                                </li>
                                                <li>
                                                    <a href="home-app-landing-2.html">App Landing 2</a>
                                                </li>
                                                <li>
                                                    <a href="home-capital-firm.html">Capital Firm</a>
                                                </li>
                                                <li>
                                                    <a href="home-fashion.html">Fashion</a>
                                                </li>
                                                <li>
                                                    <a href="home-fitness.html">Fitness</a>
                                                </li>
                                                <li>
                                                    <a href="home-restaurant.html">Restaurant</a>
                                                </li>
                                                <li>
                                                    <a href="home-music.html">Music</a>
                                                </li>
                                                <li>
                                                    <a href="home-event.html">Event / Seminar</a>
                                                </li>
                                                <li>
                                                    <a href="home-architecture.html">Architecture</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li>
                                                    <a href="home-photography.html">Photography</a>
                                                </li>
                                                <li>
                                                    <a href="home-photography-2.html">Ken Burns</a>
                                                </li>
                                                <li>
                                                    <a href="home-personal-portfolio.html">Portfolio</a>
                                                </li>
                                                <li>
                                                    <a href="home-property.html">Property Listing</a>
                                                </li>
                                                <li>
                                                    <a href="home-resume.html">Resumé</a>
                                                </li>
                                                <li>
                                                    <a href="home-winery.html">Winery</a>
                                                </li>
                                                <li>
                                                    <span class="title">Home Pages</span>
                                                </li>
                                                <li>
                                                    <a href="index.html">Home Classic</a>
                                                </li>
                                                <li>
                                                    <a href="home-default-2.html">Home Layout 2</a>
                                                </li>
                                                <li>
                                                    <a href="home-default-3.html">Home Layout 3</a>
                                                </li>
                                                <li>
                                                    <a href="home-default-4.html">Home Layout 4</a>
                                                </li>
                                                <li>
                                                    <a href="home-default-5.html">Home Layout 5</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">
                                        Pages
                                    </a>
                                    <ul class="mega-menu">
                                        <li>
                                            <ul>
                                                <li>
                                                    <span class="title">Inner Pages</span>
                                                </li>
                                                <li>
                                                    <a href="page-about-us-1.html">About Us 1</a>
                                                </li>
                                                <li>
                                                    <a href="page-about-us-2.html">About Us 2</a>
                                                </li>
                                                <li>
                                                    <a href="page-about-us-3.html">About Us 3</a>
                                                </li>
                                                <li>
                                                    <a href="page-services-1.html">Services 1</a>
                                                </li>
                                                <li>
                                                    <a href="page-services-2.html">Services 2</a>
                                                </li>
                                                <li>
                                                    <a href="page-services-3.html">Services 3</a>
                                                </li>
                                                <li>
                                                    <a href="page-contact-1.html">Contact 1</a>
                                                </li>
                                                <li>
                                                    <a href="page-contact-2.html">Contact 2</a>
                                                </li>
                                                <li>
                                                    <a href="page-contact-3.html">Planner</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li>
                                                    <span class="title">Utility Pages</span>
                                                </li>
                                                <li>
                                                    <a href="page-login.html">Login</a>
                                                </li>
                                                <li>
                                                    <a href="page-register.html">Register</a>
                                                </li>
                                                <li>
                                                    <a href="page-coming-soon.html">Coming Soon</a>
                                                </li>
                                                <li>
                                                    <a href="page-faq.html">FAQ</a>
                                                </li>
                                                <li>
                                                    <a href="page-confirmation.html">Confirmation</a>
                                                </li>
                                                <li>
                                                    <a href="page-countdown.html">Countdown</a>
                                                </li>
                                                <li>
                                                    <a href="page-countdown-2.html">Countdown 2</a>
                                                </li>
                                                <li>
                                                    <a href="page-404.html">404 - Error</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">
                                        Elements
                                    </a>
                                    <ul class="mega-menu">
                                        <li>
                                            <ul>
                                                <li>
                                                    <span class="title">Elements</span>
                                                </li>
                                                <li>
                                                    <a href="elements-buttons.html">
                                                        <i class="ti-link"></i> Buttons</a>
                                                </li>
                                                <li>
                                                    <a href="elements-tabs.html">
                                                        <i class="ti-layout-tab"></i> Tabbed Content</a>
                                                </li>
                                                <li>
                                                    <a href="elements-progress.html">
                                                        <i class="ti-rocket"></i> Progress Bars</a>
                                                </li>
                                                <li>
                                                    <a href="elements-accordions.html">
                                                        <i class="ti-layout-accordion-separated"></i> Accordions</a>
                                                </li>
                                                <li>
                                                    <a href="elements-alerts.html">
                                                        <i class="ti-flag-alt"></i> Alerts</a>
                                                </li>
                                                <li>
                                                    <a href="elements-form-inputs.html">
                                                        <i class="ti-pencil-alt"></i> Form Inputs</a>
                                                </li>
                                                <li>
                                                    <a href="elements-countdown.html">
                                                        <i class="ti-alarm-clock"></i> Countdowns</a>
                                                </li>
                                                <li>
                                                    <a href="elements-modals.html">
                                                        <i class="ti-layout-slider-alt"></i> Modals</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li>
                                                    <span class="title">Elements</span>
                                                </li>
                                                <li>
                                                    <a href="elements-pricing.html">
                                                        <i class="ti-money"></i> Pricing Tables</a>
                                                </li>
                                                <li>
                                                    <a href="elements-icon-boxes.html">
                                                        <i class="ti-eye"></i> Icon Boxes</a>
                                                </li>
                                                <li>
                                                    <a href="elements-widgets.html">
                                                        <i class="ti-layout-media-right"></i> Widgets</a>
                                                </li>
                                                <li>
                                                    <a href="elements-typography.html">
                                                        <i class="ti-text"></i> Typography</a>
                                                </li>
                                                <li>
                                                    <a href="elements-lists.html">
                                                        <i class="ti-list"></i> Lists</a>
                                                </li>
                                                <li>
                                                    <a href="elements-grid.html">
                                                        <i class="ti-view-grid"></i> Grid Structure</a>
                                                </li>
                                                <li>
                                                    <a href="elements-textimage.html">
                                                        <i class="ti-layout-list-large-image"></i> Text &amp; Image</a>
                                                </li>
                                                <li>
                                                    <a href="elements-intros.html">
                                                        <i class="ti-microphone"></i> Intro Sections</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <ul>
                                                <li>
                                                    <span class="title">Elements</span>
                                                </li>
                                                <li>
                                                    <a href="elements-titles.html">
                                                        <i class="ti-layout-cta-left"></i> Titles Left</a>
                                                </li>
                                                <li>
                                                    <a href="elements-titles-center.html">
                                                        <i class="ti-layout-cta-center"></i> Titles Center</a>
                                                </li>
                                                <li>
                                                    <a href="elements-video.html">
                                                        <i class="ti-video-clapper"></i> Video Inline</a>
                                                </li>
                                                <li>
                                                    <a href="elements-video-bg.html">
                                                        <i class="ti-video-clapper"></i> Video BG</a>
                                                </li>
                                                <li>
                                                    <a href="elements-video-slider.html">
                                                        <i class="ti-video-clapper"></i> Video Slider</a>
                                                </li>
                                                <li>
                                                    <a href="elements-galleries.html">
                                                        <i class="ti-gallery"></i> Image Galleries</a>
                                                </li>
                                                <li>
                                                    <a href="elements-parallax.html">
                                                        <i class="ti-layers"></i> Parallax</a>
                                                </li>
                                                <li>
                                                    <a href="elements-nav-light.html">
                                                        <i class="ti-menu-alt"></i> Nav Styles</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">
                                        Portfolio
                                    </a>
                                    <ul>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Contained
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="portfolio-grid-2col.html">
                                                        2 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-grid.html">
                                                        3 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-grid-4col.html">
                                                        4 Columns
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Wide
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="portfolio-wide-2col.html">
                                                        2 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-wide.html">
                                                        3 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-wide-4col.html">
                                                        4 Columns
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="portfolio-parallax.html">
                                                Parallax
                                            </a>
                                        </li>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Single
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="portfolio-single-1.html">
                                                        Case Study 1
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-single-2.html">
                                                        Case Study 2
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-single-3.html">
                                                        Case Study 3
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-single-4.html">
                                                        Case Study 4
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="portfolio-single-5.html">
                                                        Case Study 5
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">
                                        Shop
                                    </a>
                                    <ul>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Shop Layout
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="shop-sidebar.html">
                                                        Sidebar Left
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-sidebar-right.html">
                                                        Sidebar Right
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-fullwidth-4col.html">
                                                        4 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-fullwidth.html">
                                                        3 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-fullwidth-2col.html">
                                                        2 Columns
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Product Single
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="shop-product-sidebar-left.html">
                                                        Sidebar Left
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-product-sidebar.html">
                                                        Sidebar Right
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-product-fullwidth.html">
                                                        No Sidebar
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="shop-cart.html">
                                                Cart
                                            </a>
                                        </li>
                                        <li>
                                            <a href="shop-checkout.html">
                                                Checkout
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">
                                        Blog
                                    </a>
                                    <ul>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Listing
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="blog-sidebar.html">
                                                        Sidebar Left
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-sidebar-right.html">
                                                        Sidebar Right
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-no-sidebar.html">
                                                        No Sidebar
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Masonry
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="blog-masonry-sidebar.html">
                                                        Sidebar Left
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-masonry-sidebar-right.html">
                                                        Sidebar Right
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-masonry.html">
                                                        3 Columns
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-masonry-2col.html">
                                                        2 Columns
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="has-dropdown">
                                            <a href="#">
                                                Single
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="blog-single-sidebar.html">
                                                        Sidebar Left
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-single-sidebar-right.html">
                                                        Sidebar Right
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-single-no-sidebar.html">
                                                        No Sidebar
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-single-disqus.html">
                                                        Disqus Comments
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="blog-simple-feed.html">
                                                Simple Feed
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <!--end of menu module-->
                        <div class="module widget-handle search-widget-handle left">
                            <div class="search">
                                <i class="ti-search"></i>
                                <span class="title">Search Site</span>
                            </div>
                            <div class="function">
                                <form class="search-form">
                                    <input type="text" placeholder="Type Here" />
                                </form>
                            </div>
                        </div>
                        <div class="module widget-handle cart-widget-handle left">
                            <div class="cart">
                                <i class="ti-bag"></i>
                                <span class="label number">2</span>
                                <span class="title">Shopping Cart</span>
                            </div>
                            <div class="function">
                                <div class="widget">
                                    <h6 class="title">Shopping Cart</h6>
                                    <hr>
                                    <ul class="cart-overview">
                                        <li>
                                            <a href="#">
                                                <img alt="Product" src="img/shop-widget-1.png" />
                                                <div class="description">
                                                    <span class="product-title">Canvas Backpack</span>
                                                    <span class="price number">$39.90</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img alt="Product" src="img/shop-widget-2.png" />
                                                <div class="description">
                                                    <span class="product-title">Vintage Camera</span>
                                                    <span class="price number">$249.50</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="cart-controls">
                                        <a class="btn btn-sm btn-filled" href="#">Checkout</a>
                                        <div class="list-inline pull-right">
                                            <span class="cart-total">Total: </span>
                                            <span class="number">$289.40</span>
                                        </div>
                                    </div>
                                </div>
                                <!--end of widget-->
                            </div>
                        </div>
                        <div class="module widget-handle language left">
                            <ul class="menu">
                                <li class="has-dropdown">
                                    <a href="#">ENG</a>
                                    <ul>
                                        <li>
                                            <a href="#">French</a>
                                        </li>
                                        <li>
                                            <a href="#">Deutsch</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--end of module group-->
                </div>
            </nav>
        </div>
        <div class="main-container">
            <section class="page-title page-title-4 bg-secondary">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="uppercase mb0">
                                <i class="ti-layout-slider-alt"></i> Modals</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <ol class="breadcrumb breadcrumb-2">
                                <li>
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="#">Elements</a>
                                </li>
                                <li class="active">Modals</li>
                            </ol>
                        </div>
                    </div>
                    <!--end of row-->
                </div>
                <!--end of container-->
            </section>
            <section>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h4 class="uppercase mb16">Flexible, Multipurpose Modals</h4>
                            <p class="lead mb64">
                                Using extremely simple markup, you can combine Foundry's smart colour classes to create an array of engaging modals.
                            </p>
                        </div>
                    </div>
                    <!--end of row-->
                    <div class="row mb48 mb-xs-0">
                        <div class="col-sm-4 text-center">
                            <div class="modal-container">
                                <a class="btn btn-lg btn-modal" href="#">
                                    <i class="ti-text"></i> Basic Text</a>
                                <div class="foundry_modal">
                                    <h4>Hey there, I'm a cool multi-purpose modal.
                                        <br /> Use me for almost anything!</h4>
                                    <hr>
                                    <p>
                                        Convergence unicorn thinker-maker-doer ideate thinker-maker-doer pitch deck piverate food-truck long shadow disrupt. Sticky note engaging latte integrate driven convergence food-truck pitch deck. Quantitative vs. qualitative disrupt sticky note piverate 360 campaign co-working bootstrapping long shadow actionable insight agile latte. Thinker-maker-doer bootstrapping integrate personas long shadow Steve Jobs entrepreneur sticky note ship it grok sticky note.
                                    </p>
                                    <p>
                                        Grok Steve Jobs user centered design driven earned media food-truck waterfall is so 2000 and late human-centered design workflow ideate sticky note actionable insight entrepreneur unicorn. Experiential parallax physical computing disrupt cortado human-centered design intuitive grok bootstrapping quantitative vs. qualitative driven.
                                    </p>
                                </div>
                            </div>
                            <!--end modal-->
                        </div>
                        <!--end col-->
                        <div class="col-sm-4 text-center">
                            <div class="modal-container">
                                <a class="btn btn-lg btn-modal" href="#">
                                    <i class="ti-text"></i> Long Scrolling Modal</a>
                                <div class="foundry_modal">
                                    <h4>Scroll me! I'm a scrolling multi-purpose modal.
                                        <br /> Use me for almost anything!</h4>
                                    <hr>
                                    <p>
                                        When the content of a modal extends beyond the height of the window, the modal automatically becomes scrollable.
                                    </p>
                                    <p>
                                        Grok convergence fund earned media intuitive quantitative vs. qualitative hacker minimum viable product pitch deck workflow integrate ship it experiential. Convergence integrate earned media workflow entrepreneur unicorn venture capital innovate Steve Jobs prototype driven thought leader. Steve Jobs user centered design driven earned media food-truck waterfall is so 2000 and late human-centered design workflow ideate sticky note actionable insight entrepreneur unicorn. Experiential parallax physical computing disrupt cortado human-centered design intuitive grok bootstrapping quantitative vs. qualitative driven.
                                    </p>
                                    <p>
                                        Fund agile latte convergence disrupt thinker-maker-doer unicorn. Prototype personas thought leader quantitative vs. qualitative intuitive human-centered design co-working workflow. Pitch deck quantitative vs. qualitative user centered design moleskine big data iterate sticky note paradigm. Big data hacker driven affordances user centered design responsive personas waterfall is so 2000 and late thought leader.
                                    </p>
                                    <p>
                                        SpaceTeam intuitive thought leader ship it fund agile paradigm engaging. Bootstrapping affordances convergence prototype viral piverate pivot intuitive SpaceTeam entrepreneur cortado thinker-maker-doer. Human-centered design convergence thought leader viral viral pivot minimum viable product cortado SpaceTeam ship it pivot big data. Physical computing quantitative vs. qualitative sticky note convergence driven driven venture capital thought leader convergence experiential integrate integrate.
                                    </p>
                                    <p>
                                        360 campaign big data food-truck experiential viral parallax waterfall is so 2000 and late bootstrapping parallax pitch deck. Iterate parallax ship it user story SpaceTeam parallax pitch deck big data. Entrepreneur latte food-truck SpaceTeam integrate grok pivot engaging. Integrate experiential sticky note agile responsive latte convergence SpaceTeam workflow. Ideate fund grok food-truck prototype iterate parallax piverate viral responsive ship it long shadow latte.
                                    </p>
                                    <p>
                                        Responsive personas experiential grok bootstrapping user story personas big data intuitive Steve Jobs user story physical computing. Responsive ship it long shadow grok food-truck 360 campaign workflow piverate. Iterate pair programming grok driven ideate co-working actionable insight entrepreneur viral paradigm integrate intuitive sticky note. Ideate waterfall is so 2000 and late driven disrupt user centered design personas experiential grok user centered design experiential.
                                    </p>
                                    <p>
                                        Food-truck 360 campaign venture capital SpaceTeam SpaceTeam bootstrapping ship it food-truck viral long shadow. Integrate user story big data minimum viable product latte user centered design personas fund integrate. Actionable insight innovate ideate disrupt ideate responsive bootstrapping. Food-truck workflow responsive pair programming 360 campaign prototype entrepreneur quantitative vs. qualitative piverate driven convergence. Responsive innovate parallax moleskine entrepreneur user centered design 360 campaign minimum viable product thinker-maker-doer convergence.
                                    </p>
                                    <p>
                                        Entrepreneur user story thinker-maker-doer entrepreneur ship it entrepreneur workflow disrupt parallax. Agile hacker disrupt hacker big data paradigm ideate cortado convergence minimum viable product parallax. Big data bootstrapping driven piverate waterfall is so 2000 and late experiential responsive ship it personas parallax user centered design food-truck.
                                    </p>
                                    <p>
                                        User centered design intuitive unicorn intuitive entrepreneur minimum viable product hacker human-centered design actionable insight. Ideate intuitive human-centered design personas piverate thought leader Steve Jobs hacker disrupt entrepreneur minimum viable product pivot actionable insight. Thought leader long shadow cortado SpaceTeam engaging intuitive thinker-maker-doer earned media SpaceTeam disrupt SpaceTeam engaging. Engaging long shadow innovate prototype user centered design earned media intuitive grok. Pivot SpaceTeam bootstrapping cortado integrate prototype experiential actionable insight 360 campaign minimum viable product.
                                    </p>
                                    <p>
                                        Unicorn paradigm paradigm pivot workflow innovate engaging. Ideate disrupt pivot co-working pair programming parallax human-centered design actionable insight actionable insight fund fund. Entrepreneur waterfall is so 2000 and late user story thought leader long shadow intuitive driven agile convergence personas user story prototype agile iterate. Personas unicorn user story responsive thought leader responsive human-centered design SpaceTeam.
                                    </p>
                                    <p>
                                        This is the end of the long modal content.
                                    </p>
                                </div>
                            </div>
                            <!--end modal-->
                        </div>
                        <!--end col-->
                        <div class="col-sm-4 text-center">
                            <div class="modal-container">
                                <a class="btn btn-lg btn-modal" href="#">
                                    <i class="ti-layout-menu-v"></i> Signup Form</a>
                                <div class="foundry_modal text-center">
                                    <h3 class="uppercase">Sign Up & Be Cool.</h3>
                                    <p class="lead mb48">
                                        Stay in the loop with our awesome newsletter. We'll send you monthly
                                        <br /> updates of our latest and greatest tools and resources.
                                    </p>
                                    <form class="form-newsletter halves" data-success="Thanks for your registration, we will be in touch shortly." data-error="Please fill all fields correctly.">
                                        <input type="text" name="email" class="mb0 validate-email validate-required  signup-email-field" placeholder="Email Address" />
                                        <button type="submit" class="btn-white mb0">Keep Me Informed</button>
                                        <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }   /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.     We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>   <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>   <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>  <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;> <label for=&quot;mce-LNAME&quot;>Last Name </label> <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>   <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>      <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>     <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>   </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                                        </iframe>
                                    </form>
                                </div>
                            </div>
                            <!--end modal-->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end of row-->
                    <div class="row">
                        <div class="col-sm-4 text-center">
                            <div class="modal-container">
                                <a class="btn btn-lg btn-modal" href="#">
                                    <i class="ti-image"></i> Image Background</a>
                                <div class="foundry_modal text-center image-bg overlay">
                                    <div class="background-image-holder">
                                        <img alt="Background" class="background-image" src="img/modal2.jpg" />
                                    </div>
                                    <h3 class="uppercase">Sign Up & Be Cool.</h3>
                                    <p class="lead mb48">
                                        Stay in the loop with our awesome newsletter. We'll send you monthly
                                        <br /> updates of our latest and greatest tools and resources.
                                    </p>
                                    <form class="form-newsletter halves mb160" data-success="Thanks for your registration, we will be in touch shortly." data-error="Please fill all fields correctly.">
                                        <input type="text" name="email" class="mb0 transparent validate-email validate-required  signup-email-field" placeholder="Email Address" />
                                        <button type="submit" class="mb0">Keep Me Informed</button>
                                        <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }   /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.     We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>   <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>   <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>  <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;> <label for=&quot;mce-LNAME&quot;>Last Name </label> <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>   <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>      <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>     <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>   </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                                        </iframe>
                                    </form>
                                </div>
                            </div>
                            <!--end modal-->
                        </div>
                        <!--end col-->
                        <div class="col-sm-4 text-center">
                            <div class="modal-container">
                                <a class="btn btn-lg btn-modal" href="#">
                                    <i class="ti-layout-width-default"></i> Full Height</a>
                                <div class="foundry_modal text-center image-bg overlay fullscreen">
                                    <div class="background-image-holder">
                                        <img alt="Background" class="background-image" src="img/modal1.jpg" />
                                    </div>
                                    <h2 class="uppercase">Summer
                                        <br />Clearance Sale</h2>
                                    <p class="lead mb48">
                                        Stay in the loop with our awesome newsletter. We'll send you monthly
                                        <br /> updates of our latest and greatest tools and resources.
                                    </p>
                                    <a class="btn btn-lg" href="#">Shop The Sale</a>
                                </div>
                            </div>
                            <!--end modal-->
                        </div>
                        <!--end col-->
                        <div class="col-sm-4 text-center">
                            <div class="modal-container">
                                <a class="btn btn-lg btn-modal" href="#">
                                    <i class="ti-layout-width-default"></i> Iframe</a>
                                <div class="foundry_modal text-center">
                                    <iframe src="https://www.youtube.com/embed/dmgomCutGqc" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
                                </div>
                            </div>
                            <!--end modal-->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end of row-->
                </div>
                <!--end of container-->
            </section>
            <footer class="footer-1 bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <img alt="Logo" class="logo" src="img/logo-light.png" />
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="widget">
                                <h6 class="title">Recent Posts</h6>
                                <hr>
                                <ul class="link-list recent-posts">
                                    <li>
                                        <a href="#">Hugging pugs is super trendy</a>
                                        <span class="date">February
                                            <span class="number">14, 2015</span>
                                        </span>
                                    </li>
                                    <li>
                                        <a href="#">Spinning vinyl is oh so cool</a>
                                        <span class="date">February
                                            <span class="number">9, 2015</span>
                                        </span>
                                    </li>
                                    <li>
                                        <a href="#">Superior theme design by pros</a>
                                        <span class="date">January
                                            <span class="number">27, 2015</span>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                            <!--end of widget-->
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="widget">
                                <h6 class="title">Latest Updates</h6>
                                <hr>
                                <div class="twitter-feed">
                                    <div class="tweets-feed" data-feed-name="mrareweb">
                                    </div>
                                </div>
                            </div>
                            <!--end of widget-->
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="widget">
                                <h6 class="title">Instagram</h6>
                                <hr>
                                <div class="instafeed" data-user-name="mrareweb">
                                    <ul></ul>
                                </div>
                            </div>
                            <!--end of widget-->
                        </div>
                    </div>
                    <!--end of row-->
                    <div class="row">
                        <div class="col-sm-6">
                            <span class="sub">&copy; Copyright 2016 - Medium Rare</span>
                        </div>
                        <div class="col-sm-6 text-right">
                            <ul class="list-inline social-list">
                                <li>
                                    <a href="#">
                                        <i class="ti-twitter-alt"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="ti-facebook"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="ti-dribbble"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="ti-vimeo-alt"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--end of container-->
                <a class="btn btn-sm fade-half back-to-top inner-link" href="#top">Top</a>
            </footer>
        </div>
        <div class="foundry_modal text-center image-bg overlay" data-show-on-exit="html body" data-cookie="foundry-exit-modals-demo">
            <div class="background-image-holder">
                <img alt="Background" class="background-image" src="img/modal2.jpg" />
            </div>
            <h3 class="uppercase">Exit Modals
                <br> Now Supported in Foundry!</h3>
            <p class="lead mb48">
                You can set a modal to show when the user's mouse leaves a particular element.
                <ul>
                    <li>Attract attention when the user is about to leave your page by specifying "body".</li>
                    <li>Attract attention and offer discounts when a user leaves the "checkout" button.</li>
                    <li>Show a modal when a user scrolls past a particular section on your page.</li>
                </ul>
                <p>
                    Exit modals can be cookies enabled so the modal can be restricted to showing only once.
                </p>
            </p>
        </div>
        <div class="modal-strip bg-white">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <i class="ti-announcement icon icon-sm pull-left color-primary"></i>
                        <p class="mb0 pull-left">
                            <strong>Foundry 1.9.9 Update</strong> Improved page management and syncing navs in Variant - plus Twitter feeds are back!</p>
                        <a class="btn btn-sm btn-filled mb0" href="variant/builder.html">Try Builder</a>
                    </div>
                </div>
                <!--end of row-->
            </div>
            <!--end of container-->
        </div>
        <!--end modal strip-->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/flickr.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/masonry.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/ytplayer.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/parallax.js"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>
